<template>
  <div class="user-leave">
    <div class="query-form">
      <el-form
        ref="lookForm"
        :inline="true"
        :model="queryForm"
        style="display: flex"
      >
        <div class="query" style="display: flex">
          <el-form-item label="审批状态" prop="applyState">
            <el-select v-model="queryForm.applyState">
              <el-option value="" label="全部"></el-option>
              <el-option value="1" label="待审批"></el-option>
              <el-option value="2" label="审批中"></el-option>
              <el-option value="3" label="审批拒绝"></el-option>
              <el-option value="4" label="审批通过"></el-option>
              <el-option value="5" label="作废"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="clickQuery" style="margin-left: 30px; width: 200px">
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </el-form>
    </div>

    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="leaveAdd">申请休假</el-button>
      </div>

      <el-table
        ref="multipleTableRef"
        :data="leaveList"
        style="width: 100%"
        row-key="_id"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button type="primary" @click="leaveLook(scope.row)"
              >查看</el-button
            >
            <el-button type="danger" @click="leaveDel(scope.row)"
              >撤销</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="showMadol" title="申请休假">
      <el-form ref="dialogForm" :model="leaveForm">
        <el-form-item label="休假类型" prop="applyType" required>
          <el-select v-model="leaveForm.applyType">
            <el-option label="事假" :value="1"></el-option>
            <el-option label="调休" :value="2"></el-option>
            <el-option label="年假" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="休假时间段" required>
          <el-date-picker
            v-model="leaveForm.time"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
            :size="size"
            @change="days"
          />
        </el-form-item>
        <el-form-item label="休假时长" prop="day">
          {{ leaveDates }}天
        </el-form-item>
        <el-form-item label="休假理由" prop="reasons">
          <el-input
            v-model="leaveForm.reasons"
            :rows="2"
            type="textarea"
            placeholder="Please input"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="showLookMadol" title="申请休假详情">
      <el-steps :space="300" :active="active" finish-status="success">
        <el-step title="待审批" />
        <el-step title="审批中" />
        <el-step title="审批通过/审批拒绝" />
      </el-steps>
      <el-form ref="lookForm" :model="applyForm">
        <el-form-item label="休假类型:" required
          >{{ applyForm.applyType }}
        </el-form-item>
        <el-form-item label="休假时间:" required>{{
          applyForm.date
        }}</el-form-item>
        <el-form-item label="休假时长:">{{ applyForm.leaveTime }}</el-form-item>
        <el-form-item label="休假原因:">{{ applyForm.reasons }}</el-form-item>
        <el-form-item label="审批状态:">{{
          applyForm.applyState
        }}</el-form-item>
        <el-form-item label="审批人:">{{
          applyForm.curAuditUserName
        }}</el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <el-pagination background layout="prev, pager, next" :total="1000" />
</template>

<script setup>
import api from "../api/index";
import { ref, reactive, toRaw, nextTick, computed } from "vue";
import utils from "../utils/utils";

// 定义查询状态列表
const queryForm = reactive({});
// 定义查询按钮
const onSubmit = async () => {
  console.log(queryForm);
  let res = await api.getLeaveList(queryForm);
  console.log(res.list);
  leaveList.value = res.list;
};
// 定义申请请假列表
const leaveForm = ref({});
// 定义请假列表
let leaveList = ref([]);
// 定义动态表格格式
const columns = reactive([
  {
    label: "单号",
    prop: "orderNo",
  },
  {
    label: "休假时间",
    prop: "startTime",
    formatter: (row, column, value) => {
      return `${row.startTime.slice(0, 10)}-${row.endTime.slice(0, 10)}`;
    },
  },
  {
    label: "休假时长",
    prop: "leaveTime",
  },
  {
    label: "休假类型",
    prop: "applyType",
    formatter: (row, column, value) => {
      return {
        1: "事假",
        2: "调休",
        3: "年假",
      }[value];
    },
  },
  {
    label: "休假原因",
    prop: "reasons",
  },
  {
    label: "申请时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
  {
    label: "审批人",
    prop: "auditUsers",
  },
  {
    label: "当前审批人",
    prop: "applyUser.userName",
  },
  {
    label: "审批状态",
    prop: "applyState",
    formatter: (row, column, value) => {
      return {
        1: "待审批",
        2: "审批中",
        3: "审批拒绝",
        4: "审批通过",
        5: "作废",
      }[value];
    },
  },
]);
// 获取请假列表
let data = {
  type: "",
};
const getLeaveList = async () => {
  let res = await api.getLeaveList(data);
  res.list.forEach((ele) => {
    if (!ele.leaveTime) {
      let eT = +new Date(ele.endTime);
      let sT = +new Date(ele.startTime);
      ele["leaveTime"] = (eT - sT) / 86400000 + "天";
    }
  });
  console.log(res.list);
  leaveList.value = res.list;
};
getLeaveList();
// 定义获取表单节点dialogForm
const dialogForm = ref(null);
// 定义记录用户行为
const action = ref("add");
// 定义弹窗showMadol
const showMadol = ref(false);
// 定义表单重置方法
const resetForm = () => {
  dialogForm.value.resetFields();
};
// 定义申请休假按钮
const leaveAdd = () => {
  action.value = "create";
  showMadol.value = true;
};
// 定义申请表单里 休假时长天数
const leaveDates = ref(0);
// 点完日历后触发的事件
const days = (time) => {
  console.log(time);
  leaveDates.value = (time[1] - time[0]) / 86400000;
  leaveForm.value.startTime = time[0];
  leaveForm.value.endTime = time[1];
  console.log(leaveDates.value);
};
// 定义申请提交确定按钮;
const handleSubmit = () => {
  dialogForm.value.validate(async (vaild) => {
    if (vaild) {
      const leaveData = toRaw(leaveForm);
      leaveData.value.action = action.value;
      console.log(leaveData);
      let res = await api.operateLeave(leaveData.value);
      console.log(res);
      resetForm();
      showMadol.value = false;
      getLeaveList();
    }
  });
};
// 定义取消按钮
const handleCancel = () => {
  resetForm();
  showMadol.value = false;
};

// 定义获取表单节点dialogForm
const lookForm = ref(null);
// 定义查看弹窗
const showLookMadol = ref(false);
// 定义approveForm
const applyForm = ref([]);
// 定义active
const active = ref({});
// 定义查看按钮
const leaveLook = (row) => {
  let applyList = {
    // 新开一个堆，让下面赋值的时候后不影响到原数组的数据
    ...row,
  };
  applyList.applyType = {
    1: "事假",
    2: "调休",
    3: "年假",
  }[applyList.applyType];
  applyList.applyState = {
    1: "待审批",
    2: "审批中",
    3: "审批拒绝",
    4: "审批通过",
    5: "作废",
  }[applyList.applyState];
  active.value = row.applyState;
  showLookMadol.value = true;
  applyForm.value = applyList;
  applyForm.value.date = `${applyList.startTime.slice(
    0,
    10
  )}到${applyList.endTime.slice(0, 10)}`;
};
// 定义审批弹窗每条数据
const approveForm = ref({});
// 定义审批按钮
const approveList = (row) => {
  showMadol.value = true;
  console.log(row);
  approveForm.value = row;
  approveForm.value.date = `${row.startTime.slice(0, 10)}-${row.endTime.slice(
    0,
    10
  )}`;
};
// 定义撤销按钮;
const leaveDel = async (row) => {
  let data = { action: "delete", ...row };
  await api.operateLeave(data);
  getLeaveList();
};
</script>
<style lang="scss" scoped></style>
